<template>
  <div>
    <h2>预约设置</h2>

    <div class="box">
      <div class="operating">
        <el-button type="success" size="small" @click="addSetting">+新增</el-button>
      </div>
      <div class="operating">
        <el-input placeholder="查找..." class="search-input" v-model="searchInput">
          <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
        </el-input>
      </div>

    </div>

    <!-- 表格 -->
    <el-table :data="currentList" style="width: 100%" v-if="isShow">
      <el-table-column prop="appointmentHolder" label="预约人" width="180">
      </el-table-column>
      <el-table-column prop="department" label="预约部门" width="180">
      </el-table-column>
      <el-table-column prop="title" label="职称">
      </el-table-column>
      <el-table-column prop="bookableDays" label="可预约天数">
      </el-table-column>
      <el-table-column prop="numberLimit" label="人数限制">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
            <el-tag disable-transitions type="success" v-if="scope.row.status == '可预约'">{{
              scope.row.status
            }}</el-tag>
            <el-tag disable-transitions type="danger" v-if="scope.row.status == '离线中'">{{
              scope.row.status
            }}</el-tag>
          </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="200">
        <template slot-scope="scope">
        <el-button type="primary" size="mini"  @click="modify(scope.$index)">
          <i class="el-icon-edit"></i>修改
        </el-button>
        <el-button type="danger" size="mini" @click="Delete(scope.$index)">
          <i class="el-icon-close"></i>删除
        </el-button>
        </template>>
      </el-table-column>
    </el-table>


      <!-- 分页 -->
      <div class="block">
        <Pagination :total="total" :pageSize="pagesize" @getPagination="getPagination"></Pagination>
      </div>



</div>
</template>
<script>
import { RouterLink } from 'vue-router'
import Pagination from '@/components/Pagination'

export default {
  name: '',
  components: {
    Pagination
  },
  mixins: [],
  props: {

  },
  data() {
    return {
      currentList:{},
      currentPage: 1,
      pagesize: 10,
      searchInput:"",
      isShow:false,
      total:0
    }
  },


  created(){
    this.render()
  },
  methods: {

    //渲染
    async render(){
      await this.$api.appointment.findAppointmentUserList({
        pageSize:this.pagesize,
        pageNum:this.currentPage
      }).then((res) =>{
        //有数据后修改处
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        console.log(res)
      })
      this.isShow = true

    },


    //删除
    Delete(index) {
      this.$confirm('删除该记录将不能恢复，确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {    
        this.$api.appointment.deleteAppointmentUser(
          this.currentList[index].id
        ).then(
          this.$message({
          type: 'success',
          message: '删除成功!',
        }),

        )
        this.render()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    addSetting(){
      this.$router.push("/appointment/addSetting")
    },

    //模糊查询
    search(){
      if (this.searchInput === "") {
        this.render()
      } else {
        this.$api.appointment.queryAppointmentUserList({
          pageSize: 5,
          pageNum: 1,
          query: this.searchInput
        }).then((res) => {
          //有数据后修改处
          this.total = res.data.data.total
          this.currentList = this.dataRewrite(res.data.data.list)
          console.log(res)
        })
      }
    },


    //修改
    modify(val){
      this.$router.push({
      path:'/appointment/addSetting',
      query:{
        userId:this.currentList[val].userId,
        appointmentHolder:this.currentList[val].appointmentHolder,
        bookableDays:this.currentList[val].bookableDays,
        numberLimit:this.currentList[val].numberLimit,
        status:this.currentList[val].status,
        id:this.currentList[val].id
      }})
    },

    async getPagination(page){
      this.currentPage = page
      await this.$api.appointment.findAppointmentUserList({
       pageSize: this.pagesize,
       pageNum: this.currentPage
      }).then((res) => {
        this.total = res.data.data.total
        this.currentList = this.dataRewrite(res.data.data.list)
        console.log(res)
      })
    },

    //数据处理
    dataRewrite(list){
      return list.map(item => ({
        id:item.id,
        userId:item.userId,
        appointmentHolder:item.sysUser.realName,
        department:item.sysUser.department.depName,
        title:item.sysUser.occupationName,
        bookableDays:item.days,
        numberLimit:item.numberLimit,
        status:item.status === 0? "可预约" : "离线中"
      }))
    }
  }
};
</script>


<style lang='less' scoped>
h2 {
  margin: 15px;
}

.box {
  background-color: white;
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 3px solid #ccc;
  border-radius: 5px;
}

.operating {
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.search-input {
  width: 200px;
  float: right;
}

.reserve-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>